<!--
封装组件导入功能
import导入 和 css导入
以及一些不必要的参数封装
增加 页面打开性能
-->

<script lang="ts" setup generic="T extends object">
//#region 组件导入

import {
  VxeUI,
  VxeButton,
  VxeButtonGroup,
  VxeCheckbox,
  VxeDrawer,
  VxeForm,
  VxeFormGroup,
  VxeFormItem,
  VxeIcon,
  VxeLoading,
  VxeModal,
  VxePager,
  VxePrint,
  VxeTooltip,
  VxeUpload,
  VxeSwitch,
} from 'vxe-pc-ui'

import {
  VxeColumn,
  VxeColgroup,
  VxeGrid,
  VxeToolbar,
  type VxeGridProps,
  type VxeGridListeners,
  type VxeGridInstance,
} from 'vxe-table'

// 导入主题变量，也可以重写主题变量
import 'vxe-pc-ui/lib/style.css'
import 'vxe-table/lib/style.css'

// 导入默认的语言
import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
import type { IColumnStyles } from './BaseVxeType'
import { computed, ref } from 'vue'

VxeUI.setI18n('zh-CN', zhCN)
VxeUI.setLanguage('zh-CN')

// 注册组件
// 如果页面中已经被显性导入了，则可以不用调用注册
// 如果是配置式的，没有在页面中显性导入，则需要逐个注册
VxeUI.component(VxeButton)
VxeUI.component(VxeButtonGroup)
VxeUI.component(VxeCheckbox)
VxeUI.component(VxeDrawer)
VxeUI.component(VxeForm)
VxeUI.component(VxeFormGroup)
VxeUI.component(VxeFormItem)
VxeUI.component(VxeIcon)
VxeUI.component(VxeLoading)
VxeUI.component(VxeModal)
VxeUI.component(VxePager)
VxeUI.component(VxePrint)
VxeUI.component(VxeTooltip)
VxeUI.component(VxeUpload)
VxeUI.component(VxeSwitch)

VxeUI.component(VxeColumn)
VxeUI.component(VxeColgroup)
VxeUI.component(VxeGrid)
VxeUI.component(VxeToolbar)

//#endregion

const props = withDefaults(
  defineProps<{
    gridOptions?: VxeGridProps<T>
    columnStyles?: Array<IColumnStyles>
    gridEvents?: VxeGridListeners<T>
  }>(),
  {
    columnStyles: () => [],
    gridOptions: () => ({}),
  },
)

const curGridOptions = computed<VxeGridProps<T>>(() => {
  // 在这里做一些操作, 进行判断, 如: 数据量大时, 不能进行编辑等
  // 做一些通用操作
  const commProps: VxeGridProps<T> = {
    border: true,
    round: true, // 圆角
    stripe: true, // 斑马线
    showFooter: true,
    size: 'mini',
    height: '100%',
    showOverflow: true, // 溢出不展示
    // showHeaderOverflow: true,
    // showFooterOverflow: true,
    // editConfig: {
    //   trigger: 'click', // 行编辑模式
    //   mode: 'row',
    // },
    keepSource: true,
    // mouseConfig: {
    //   selected: true,
    // },
    // rowConfig: {
    //   // isCurrent: true, // 行选中当前行
    // },
    columnConfig: {
      resizable: true, // 列宽调整
      drag: true, // 列拖拽
      // isCurrent: true, // 有bug, 只能点击表头才能生效
    },
    currentRowConfig: {
      // isFollowSelected: true,
    },
    currentColumnConfig: {
      // trigger: 'cell',
      // isFollowSelected: true,
    },
    resizableConfig: {
      isDblclickAutoWidth: true, // 是否双击自动调整列宽
    },
    scrollY: {
      // 虚拟滚动 纵向
      enabled: true,
      gt: 0,
    },
    scrollX: {
      // 虚拟滚动 横向
      enabled: true,
      gt: 0,
    },
    columns: [],
    data: [],
    // rowClassName({ rowIndex }) {
    // 使用 斑马行 修改 css 变量 进行 隔行变色
    // 表格隔行变色
    // if (rowIndex % 2 === 0) {
    //   return 'oddNumRow' //这是类名
    // } else {
    //   return 'evenNumRow'
    // }
    // },
  }

  const customProps = {
    ...commProps,
    ...props.gridOptions,
  }
  // 如果有传入列样式, 则进行列样式设置, 否则不进行设置
  if (props.columnStyles.length > 0) {
    // 判断列颜色
    customProps.cellStyle = function ({ row, column }) {
      // 列样式设置
      const columnStyles = props.columnStyles

      // 循环样式判断是否需要更改列样式
      for (const columnStyle of columnStyles) {
        if (
          columnStyle.specifyField === column.field &&
          columnStyle.value.some(
            (m) => m === (row as unknown as Record<string, string>)[columnStyle.judgeField],
          )
        ) {
          return columnStyle.style
        }
      }
    }
  }
  return customProps;
})

//#region 事件封装

// const emits = defineEmits<VxeGridListeners<T>>()
// console.log('emits', typeof emits)

// const attrs = useAttrs()

const curGruidEvents = computed<VxeGridListeners<T>>(() => {
  return {
    ...props.gridEvents,
  }
})

//#endregion

const vxeGridRef = ref<VxeGridInstance<T>>()

// 将组件中的函数进行导出
const method = {
  getVxeGridRef: () => vxeGridRef.value,
  getUpdateRecords: () => vxeGridRef.value!.getUpdateRecords(),
  getCheckboxRecords: () => vxeGridRef.value!.getCheckboxRecords(),
  getCheckboxReserveRecords: () => vxeGridRef.value!.getCheckboxReserveRecords(),
}

defineExpose({
  ...method,
})
</script>

<template>
  <div class="table-container">
    <!-- 上方容器，使用插槽，如果没有插槽则不显示 -->
    <div v-if="$slots.header" class="table-header">
      <slot name="header"></slot>
    </div>
    <!-- 表格容器 -->
    <!-- 透传所有默认及具名插槽, 将插槽向外传递 -->
    <div class="table-table">
      <VxeGrid ref="vxeGridRef" class="vxe-grid-row-height my-table" v-bind="curGridOptions" v-on="curGruidEvents">
        <template v-for="(_, name) in $slots" #[name]="slotData">
          <slot :name="name" v-bind="slotData" />
        </template>
      </VxeGrid>
    </div>

    <!-- 下方容器，使用插槽，如果没有插槽则不显示 -->
    <div v-if="$slots.footer" class="table-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<style scoped>
.table-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.table-header {
  flex-shrink: 0;
  /* 上方容器的高度可以根据需要调整 */
  min-height: 0;
}

.table-footer {
  flex-shrink: 0;
  /* 上方容器的高度可以根据需要调整 */
  min-height: 0;
}

.table-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.table-vue {
  flex: 1;
  min-height: 0;
}
</style>

<style scoped>
:root {}

.vxe-grid-row-height {
  --vxe-ui-table-row-height-default: 80px !important;
  --vxe-ui-table-row-height-medium: 60px !important;
  --vxe-ui-table-row-height-small: 40px !important;
  --vxe-ui-table-row-height-mini: 25px !important;
}

/* 使用自定义行类名, 在排序时会导致 跨行颜色定义失败 */
/* :deep(.evenNumRow) {
  background-color: rgb(241, 241, 241);
}

:deep(.oddNumRow) {
  background-color: rgb(178, 178, 179);
} */

:deep(.vxe-body--row) {
  /* 修改行样式 */
  /* background-color: rgb(241, 241, 241); */
}

:deep(.row--stripe) {
  /* 修改跨行样式 */
  --vxe-ui-table-row-striped-background-color: #fafafa;
}

/* ********************************编辑组件更新************************************ */

/* input 编辑组件 */
.my-table :deep(.vxe-cell--wrapper) {}

.my-table :deep(.vxe-cell--wrapper > .vxe-default-input) {
  height: 100%;
  margin: 0;
  padding: 0;
  padding-left: 2px;
  border: 1px dashed rgb(0, 0, 0, 0.6);
}

.my-table :deep(.vxe-cell--wrapper > .vxe-default-input:focus) {
  border: 1px dashed rgb(0, 0, 0, 0.2);
}

/* number 编辑组件 */

/* select 编辑组件 */
.my-table :deep(.vxe-cell--wrapper > .vxe-default-select) {
  height: 100%;
  margin: 0;
  padding: 0;
  padding-left: 2px;
  border: 1px dashed rgb(0, 0, 0, 0.6);
}

.my-table :deep(.vxe-cell--wrapper > .vxe-default-select:focus) {
  border: 1px dashed rgb(0, 0, 0, 0.2);
}

/* switch 编辑组件 */
.my-table :deep(.vxe-cell--wrapper > .vxe-switch) {
  height: 100%;
  margin: 0;
  padding: 0;
  padding-left: 2px;
}

.my-table :deep(.vxe-cell--wrapper > .vxe-default-select:focus) {
  border: 1px dashed rgb(0, 0, 0, 0.2);
}
</style>
